<template>
  <AdaptiveView>
    <div class="screen-container">
      <div class="screen-content" ref="screenRef">
        <div v-show="loading" class="mask flex-c">
          <dv-loading>
            <span class="loading-title">加载中...</span>
          </dv-loading>
        </div>
        <div v-if="!loading" class="h-full">
          <div class="h-full">
            <DataScreenHeader
              :title="`大连金泰生产线可视化看板`"
              :leftTitle="`班次:${jzPC?.pourClass || '-'}  浇注工:${
                jzPC?.pourUser || '-'
              }`"
              :showMonth="false"
              classes=""
            />

            <div style="height: calc(100% - 100px)" class="flex">
              <div
                class="flex w-[100%] mb-[10px] ml-[10px] mr-[10px]"
                style="height: calc(100% - 10px); flex: 1.45"
              >
                <dv-border-box13>
                  <div dv-bg class="h-[100%]">
                    <!-- 上左侧图表 -->
                    <div style="height: 100%; overflow: hidden; flex: 1">
                      <div
                        class="overflow-hidden bgchart"
                        style="border-radius: 35px"
                      >
                        <div
                          class="flex justify-center items-center screen_back"
                          style="flex-direction: column"
                        >
                          <div class="title">
                            <span class="text">熔炼区</span>
                          </div>
                          <JTScreen02RLQ
                            :rlDL="rlDL"
                            :rlPC="rlPC"
                            :rlSCWL="rlSCWL"
                            :zxcsData="zxcsData"
                            :activeData="activeData"
                            class="mt-[15px]"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </dv-border-box13>
              </div>
              <div
                style="height: calc(100% - 10px); flex: 1"
                class="flex w-[100%] mb-[10px] flex-col"
              >
                <!-- 上左侧图表 -->
                <div
                  style="
                    height: calc(50% - 5px - 100px);
                    overflow: hidden;
                    flex: 1;
                    margin-bottom: 10px;
                  "
                >
                  <div class="overflow-hidden bgchart">
                    <div
                      class="flex justify-center items-center"
                      style="flex-direction: column"
                    >
                      <div class="title">
                        <span class="text">合金加料</span>
                      </div>
                      <JTScreen02HJJL
                        :hjjlData="hjjlData"
                        :activeData="activeData"
                        class="mt-[15px]"
                      />
                    </div>
                  </div>
                </div>
                <!-- 下侧图表 -->
                <div style="height: calc(50% - 5px + 85px); overflow: hidden">
                  <div class="overflow-hidden bgchart">
                    <div
                      class="flex justify-center items-center"
                      style="flex-direction: column"
                    >
                      <div class="title">
                        <span class="text">造型参数</span>
                      </div>
                      <JTScreen02ZXCS
                        :zxcsData="zxcsData"
                        :activeData="activeData"
                        class="mt-[15px]"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                style="height: calc(100% - 10px); flex: 1.45"
                class="flex w-[100%] mb-[10px] ml-[10px] mr-[10px]"
              >
                <dv-border-box13>
                  <div dv-bg class="h-[100%]">
                    <!-- 上左侧图表 -->
                    <div style="height: 100%; overflow: hidden; flex: 1">
                      <div
                        class="overflow-hidden bgchart"
                        style="border-radius: 35px"
                      >
                        <div
                          class="flex justify-center items-center"
                          style="flex-direction: column"
                        >
                          <div class="title">
                            <span class="text">浇注区</span>
                          </div>
                          <JTScreen02JZQ
                            :jzPC="jzPC"
                            :jzCLX="jzCLX"
                            :jzSYT="jzSYT"
                            :activeData="activeData"
                            class="mt-[15px]"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </dv-border-box13>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AdaptiveView>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { jzq_mock1, jzq_mock2, jzq_mock3, act_time_mock } from "./mock";
import JTScreen02HJJL from "./components/JTScreen02-HJJL.vue";
import dayjs from "dayjs";
import { BorderBox8 as DvBorderBox8 } from "@kjgl77/datav-vue3";

defineOptions({
  name: "DATASCREENJTSCREEN02",
  inheritAttrs: false,
});

const loading = ref(true);
const refreshRate = ref(30);
onMounted(() => {
  getAllApi();

  if (refreshRate.value) {
    timer.value = setInterval(() => {
      getAllApi();
    }, refreshRate.value * 1000);
  }
});

function getAllApi() {
  // 实时数据
  getActiveData();
  // 熔炼区
  getRlPC();
  // 浇注区
  getjzPC();
  getjzCLX();
  getjzSYT();
  // 合金加料
  gethjjlData();
  // 造型参数
  getZXCS();
}

// 造型参数查询
const zxcsData = ref<any>({});
const getZXCS = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata5/getEffectiveOne`,
    method: "post",
    data: {},
  }).catch(() => {
    zxcsData.value = {};
  });
  // console.log("造型参数查询", data);
  zxcsData.value = data || {};
};

// 熔炼区电炉
const rlDL = ref<any>([]);
const getRlDL = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata1/getList`,
    method: "post",
    data: {},
  }).catch(() => {
    rlDL.value = [];
  });
  // console.log("熔炼区电炉", data);
  rlDL.value = data || [];
  getRlSCWL(data[activeData.value.l1 - 1].deviceId);
};

// 熔炼区生产物料查询
const rlSCWL = ref<any>({});
const getRlSCWL = async (id: string) => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata2/getProduct`,
    method: "post",
    data: {
      deviceId: id,
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    rlSCWL.value = {};
  });
  // console.log("熔炼区生产物料查询", data);
  rlSCWL.value = data || {};
  loading.value = false;
};

// 熔炼区批次查询
const rlPC = ref<any>({});
const getRlPC = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata3/getLeLastOne`,
    method: "post",
    data: {
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    rlPC.value = {};
  });
  // console.log("熔炼区批次查询", data);
  rlPC.value = data || {};
};

// 合金加料查询
const hjjlData = ref<any>({});
const gethjjlData = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata4/getLeLastOne`,
    method: "post",
    data: {
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    hjjlData.value = {};
  });
  // console.log("合金加料查询", data);
  hjjlData.value = data || {};
};

// 浇注区批次查询
const jzPC = ref<any>({});
const getjzPC = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata6/getLeLastOne`,
    method: "post",
    data: {
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    jzPC.value = {};
    // jzPC.value = jzq_mock1;
  });
  // console.log("浇注区批次查询", data);
  jzPC.value = data || {};
};

// 浇注区测量项查询
const jzCLX = ref<any>([]);
const getjzCLX = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata7/getList`,
    method: "post",
    data: {},
  }).catch(() => {
    jzCLX.value = [];
    // jzCLX.value = jzq_mock2;
  });
  // console.log("浇注区测量项查询", data);
  jzCLX.value = data || [];
};

// 浇注区示意图查询
const jzSYT = ref<any>([]);
const getjzSYT = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata8/getLeLastOne`,
    method: "post",
    data: {
      planTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    },
  }).catch(() => {
    jzSYT.value = [];
    // jzSYT.value = jzq_mock3;
  });
  // console.log("浇注区示意图查询", data);
  jzSYT.value = data || [];
};

// 实时数据查询
const activeData = ref<any>({});
const getActiveData = async () => {
  const { data }: any = await request({
    url: `/mes/biproductlinedata9/getEffectiveOne`,
    method: "post",
    data: {},
  }).catch(() => {
    activeData.value = {};
    // activeData.value = act_time_mock;
  });
  // console.log("activeData", data);
  activeData.value = data || {};
  getRlDL();
  // getRlSCWL(data?.)
};

let timer: any = ref(null);

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-image: url("@/assets/images/screen/home_bg.png");
  }

  .screen-content {
    width: 1548px;
    height: 946px;
    box-sizing: border-box;
    // padding: 12px;
    background-image: url("@/assets/images/screen/home_bg.png");
    transition: all 0.2s ease-in-out;

    :deep(.el-card) {
      background-color: transparent;
      border: none;
      .el-card__header {
        background: rgba(212, 219, 249, 0.1);
        border-bottom: none;
        color: white;
        .el-card-title {
          color: white;
        }
      }
    }

    .title {
      background-image: url(@/assets/images/screen/bg-title.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: left;
      width: auto;
      height: 32px;
      line-height: 32px;
      margin-top: 10px;
      .text {
        font-size: 32px;
        padding-left: 30px;
        // font-weight: 600;
        font-family: YOUSHE;
        writing-mode: horizontal-tb;
        text-orientation: upright;
        color: transparent;
        background: linear-gradient(
            0deg,
            rgb(255, 255, 255) 0px,
            rgb(255, 255, 255) 100%
          )
          text;
        clip-path: inset(1px);
      }
    }
    .bgchart {
      // background: rgba(15, 36, 62, 0.6);
      background: rgba(88, 175, 255, 0.1);
      height: 100%;

      // background-image: url(@/assets/images/screen/preview10.png);
      // background-repeat: no-repeat;
      // background-size: cover;
      // background-position: left;
    }

    .loading-title {
      font-size: 16px;
      color: #fff;
      margin-top: 10px;
    }
  }
}

.screen_back {
  height: 100%;
  // background: url("@/assets/images/screen/pageBg1.png") center center / 100%
  //   100% no-repeat;
}
</style>
